<template>
  <!-- 回复我的 -->
  <div class="reply-to-mine">
    <div class="reply-to-mine-head">
      <span> 回复我的 </span>
    </div>
    <div class="reply-to-mine-body">
      <el-card
        v-for="item in replyToMineList.slice(
          (queryinfo.no - 1) * size,
          queryinfo.no * size
        )"
        :key="item.id"
      >
        <el-row class="infinite-list-item">
          <el-col :span="3">
            <div class="avatar">
              <el-avatar
                style="width: 80px; height: 80px; border: none; float: left"
                shape="square"
                :size="50"
                :src="item.avatar"
              ></el-avatar>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="user">
              <a class="user-nick"
                >{{ item.nickname }}&nbsp;<span>回复了我的视频</span></a
              ><br />
              <p>{{ item.content }}</p>
              <a class="time">{{ item.time }}</a>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="comment">
              <p>{{ item.comment }}</p>
            </div>
          </el-col>
        </el-row>
      </el-card>
        <el-pagination
        class="pagination"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.no"
          :page-sizes="[5]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
    
    </div>
  </div>
</template>

<script>
import { getCommentList } from "@/api/commentApi";
export default {
  data() {
    return {
      schArr: [],
      total: 0,
      page: 0,
      size: 5,
      queryinfo: {
        no: 1,
        size: 50,
        userId: sessionStorage.getItem("id"),
      },
      replyToMineList: [],
    };
  },
  methods: {
    // 获取评论列表
    getCommentList() {
      getCommentList(this.queryinfo)
        .then((res) => {
          this.replyToMineList = res.data.data.rows;
          this.total = res.data.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.queryinfo.no = 1;
      this.queryinfo.size = val;
    },

    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.queryinfo.no = val;
    },
  },

  created() {
    this.getCommentList();
  },
};
</script>

<style >
.reply-to-mine-head {
  margin-top: 10px;
  margin-left: 205px;
  width: 800px;
  height: 30px;
  background-color: white;
  border-radius: 5px;
}
.reply-to-mine-body {
  margin-top: 10px;
  margin-left: 205px;
  width: 800px;
  background-color: white;
  border-radius: 5px;
  min-height: 600px;
  position:absolute;
}

.pagination{
  position:absolute;
  bottom: 20px;
  margin-left: 200px;
}

.avatar {
  width: 100px;
  height: 90px;
}
.reply-to-mine-body .user {
  width: 300px;
  height: 80px;
  float: left;
}
.reply-to-mine-body .user .user-nick {
  width: 80px;
  height: 70px;
  color: black;
  font-weight: 600;
  font-size: 14px;
}
.reply-to-mine-body .user a span {
  font-weight: 400;
}
.reply-to-mine-body .user span {
  line-height: 18px;
}
.reply-to-mine-body .user p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-to-mine-body .comment {
  width: 80px;
  height: 90px;
  float: right;
}
.reply-to-mine-body .comment p {
  font-size: 15px;
}
.reply-to-mine-body .user .time {
  font-size: 12px;
  color: #a1a1a1;
}
</style>
